<template>
  <div class="achievement-container">
    <div v-for="item in achievements" :key="item.articleId" class="achievement-item" @click="yrcg_list(item)">
      <span class="yrcg_list_title">{{ limitText(item.title, 15) }}</span>
      <div class="yrcg_list_center">
        <div class="yrcg_list_left">
          <img :src="item.articleImage" alt="achievement" class="achievement-image" />
        </div>
        <div class="yrcg_list_right">
          <p>{{ limitText(item.content, 30) }}</p>
        </div>
      </div>
      <div class="author-date">
        <span>{{ item.teacherName }}</span>
        <span>{{ formatDate(item.createTime) }}</span>
      </div>
    </div>
    <br/>
    <div class="none_nr_down">
      暂无更多数据
    </div>
  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {userLoginUsingPost} from "../../Api/yonghumokuai.js";
import {useUserStore} from "../../Store/modules/userinfo/UserInfo.js";
import {showDialog, showToast} from "vant";
import {getEducationAchievementRequestArticleUsingPost} from "../../Api/yurenchengguomokuai.js";
import { useTeachingPostStore } from "../../Store/modules/YRCG/EducationalAchievementArticle.js"
import router from "../../Router/index.js";

const EducationalAchievementArticleStore = useTeachingPostStore();

const achievements = ref([]);

async function getYRCGList() {
  try {
    const response = await getEducationAchievementRequestArticleUsingPost({
      page: 1,
      pageSize: 5
    })
    // console.log(response.data.data)
    achievements.value = response.data.data

  }catch (err){
    console.log(err)
  }
}

// 定义日期格式化方法
function formatDate(dateString) {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toISOString().split('T')[0]; // 提取日期部分
}

// 定义限制字数的方法
function limitText(text, limit) {
  if (!text) return '';
  if (text.length <= limit) return text; // 如果文本长度小于等于限制长度，直接返回
  return text.slice(0, limit) + '...'; // 截取指定长度并添加省略号
}

function yrcg_list(ArticleStore){
  EducationalAchievementArticleStore.fetchArticleDetail = ArticleStore;
  // console.log(EducationalAchievementArticleStore.fetchArticleDetail)
  router.push('/YRCGXQView')
}

onMounted(() => {
  getYRCGList();
});
</script>

<style scoped>
.achievement-container {
  height: 300px; /* 根据需要设置固定高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  padding: 10px; /* 内边距 */
}

.achievement-item {
  display: flex;
  flex-direction: column; /* 垂直排列内容 */
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.achievement-image {
  width: 100%;
  max-height: 100px;
  margin-right: 10px;
  border-radius: 10px;
}

.author-date {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #888;
  margin-top: 10px;
  margin-left: 3px;
}
.yrcg_list_title{
  font-size: 17px;
  display: block;
  margin-bottom: 10px;
  margin-left: 3px;
}
.yrcg_list_left{
  display: inline-block;
  width: 44%;
  //height: auto;
  aspect-ratio: 16 / 9;
  float: left;
}
.yrcg_list_right{
  display: inline-block;
  width: 50%;
  float: right;
  margin-right: 3%;
  font-size: 14px;
  color: rgba(128, 128, 128, 0.99);
}
.yrcg_list_center{
  overflow: hidden;
  line-height: 22px;
}
.none_nr_down{
  text-align: center;
  color: gray;
  margin-top: -30px;
  font-size: 13px;
}
</style>
